<!-- 会议室预约申请 -->
<template>
  <view>
    <u-form
      :model="model"
      :rules="rules"
      ref="form"
      labelPosition="top"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px'
      }"
    >
      <view class="basic-style">
        <view class="basic-title basic-border">基本信息</view>
        <u-form-item label="申请人" prop="applyUser" required>
          <h-select-person-input
            style="width: 100%"
            disabled
            v-model="model.applyUser"
            placeholder="请选择申请人"
            border="surround"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            objectField="model.applyUser"
          ></h-select-person-input>
        </u-form-item>
        <u-form-item label="申请部门" prop="applyUserDept" required>
          <h-select-depart-input
            v-model="model.applyUserDept"
            :departName="model.proposerDeptText"
            placeholder="请选择部门"
            border="surround"
            style="width: 100%"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            :title.sync="model.proposerDeptText"
          ></h-select-depart-input>
        </u-form-item>
        <u-form-item label="申请时间" prop="applyDate" required>
          <u--input v-model="model.applyDate" disabled suffixIcon="calendar-fill" :suffixIconStyle="{color: '#B2B2B2'}" placeholder="请选择日期"></u--input>
        </u-form-item>
        <u-form-item label="会议室名称" prop="roomName" required>
          <u--input v-model="model.roomName" disabled  placeholder="请输入会议室名称"></u--input>
        </u-form-item>
        <u-form-item label="管理员" prop="administrator" required>
          <h-select-person-input
            style="width: 100%"
            disabled
            v-model="model.administrator"
            placeholder="请选择管理员"
            border="surround"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            objectField="model.administrator"
          ></h-select-person-input>
        </u-form-item>
        <u-form-item label="使用用途" prop="usePurpose" required>
					<h-select-input-tag
					  class="w-100"
					  v-model="model.usePurpose"
					  objectField="model.usePurpose"
					  placeholder="请选择使用用途"
					  border="surround"
					  suffixIcon="arrow-down-fill"
						:suffixIconStyle="{color: '#B2B2B2'}"
					  dictName="meeting_room_use_purpose"
					></h-select-input-tag>
        </u-form-item>
				<u-form-item label="参会人数" prop="attendanceNum" required>
					<h-number-input
						class="w-100"
						placeholder="请输入参会人数"
						:min="1"
						:digit="0"
				    v-model="model.attendanceNum"></h-number-input>
				</u-form-item>
				<u-form-item label="预定开始日期" prop="beginDate" required>
				  <h-time-select
				    mode="date"
				    v-model="model.beginDate"
				    placeholder="请选择预定开始日期"
				    border="surround"
						disabled
				    suffixIcon="calendar-fill"
				    :suffixIconStyle="{ color: '#B2B2B2' }"
						:minDate="date?(new Date(date)).getTime():315504000000"
						:maxDate="model.endDate?(new Date(model.endDate)).getTime(): (new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate())).getTime()"
				  ></h-time-select>
				</u-form-item>
				<u-form-item label="预定结束日期" prop="endDate" required>
				  <h-time-select
				    mode="date"
				    v-model="model.endDate"
				    placeholder="请选择预定结束日期"
				    border="surround"
						disabled
				    suffixIcon="calendar-fill"
				    :suffixIconStyle="{ color: '#B2B2B2' }"
						:minDate="date?(new Date(model.beginDate? model.beginDate : date)).getTime():315504000000"
				  ></h-time-select>
				</u-form-item>
				<u-form-item label="预定开始时间" prop="beginTime" required>
				  <h-time-select
				    mode="time"
				    v-model="model.beginTime"
				    placeholder="请选择预定开始时间"
				    border="surround"
				    suffixIcon="calendar-fill"
				    :suffixIconStyle="{ color: '#B2B2B2' }"
						:maxMinute="0"
						:minHour="8"
						:maxhour="22"
				  ></h-time-select>
				</u-form-item>
				<u-form-item label="预定结束时间" prop="endTime" required>
				  <h-time-select
				    mode="time"
				    v-model="model.endTime"
				    placeholder="请选择预定结束时间"
				    border="surround"
				    suffixIcon="calendar-fill"
				    :suffixIconStyle="{ color: '#B2B2B2' }"
						:maxMinute="0"
						:minHour="8"
						:maxhour="22"
				  ></h-time-select>
				</u-form-item>
        <u-form-item label="会议主题" prop="meetingTheme" required>
          <u--input maxlength="200" count v-model="model.meetingTheme" placeholder="请输入会议主题"></u--input>
        </u-form-item>
        <u-form-item label="会前准备" prop="meetingPrepare">
          <u--textarea :confirm-type="null" maxlength="500" v-model="model.meetingPrepare" placeholder="请输入会前准备"></u--textarea>
        </u-form-item>
        <u-form-item label="备注" prop="remark">
          <u--textarea :confirm-type="null" maxlength="500" v-model="model.remark" placeholder="请输入备注"></u--textarea>
        </u-form-item>
      </view>
      <view class="basic-style">
        <view class="basic-title basic-border">附件信息</view>
        <view class="py-1 space-y-1" style="width: 100%">
          <view style="color: red">提示：请等待附件上传完成，再点击保存，否则附件无法保存成功！</view>
          <h-upload-file v-model="model.attachment" :isIcon="false"></h-upload-file>
          <file-list v-if="model.attachment" v-model="model.attachment" :isDelete="true"></file-list>
        </view>
      </view>

      <view class="space-x-1 px-1 btn_position">
				<u-button :disabled="isSubmit" type="primary" :plain="true" text="关闭" @click="onDraft"></u-button>
				<u-button :disabled="isSubmit"  type="primary"  text="保存" @click="onSubmit"></u-button>
      </view>
			<view style="height: 100rpx;"></view>
    </u-form>
	<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import {  add, edit } from '@/api/meeting/erpMeetingReservation.js'

import fileList from '@/pages/synergy/components/fileList.vue'
export default {
  name: 'ErpMeetingReservationForm',
  components: {
    fileList,
  },
  data() {
    return {
			info: {}, // 回显数据
			type: '', // 类型
			date: '', // 选择的时间
			isSubmit: false, // 控制按钮是否可以点击
      loading: false,
      model: {
        applyUser: '', // 申请人
        applyUserDept: '', // 申请部门
        applyDate: '', // 申请时间
        roomName: '', // 会议室名称
        administrator: '', // 管理员
        usePurpose: '', // 使用用途
        attendanceNum: '', // 参会人数
				beginDate:'',  // 预定开始日期
				endDate:'',  // 预定结束日期时间
				beginTime:'',  // 预定开始日期时间
				endTime:'',  // 预定结束日期时间
        meetingTheme: '', // 会议主题
        meetingPrepare: '', // 会前准备
        remark: '', // 备注
        attachment: null, // 附件
      },
      rules: {
				usePurpose: [{ required: true, message: '请选择使用用途!', trigger: ['blur', 'change'] }],
				attendanceNum: [{ required: true, message: '请输入参会人数!', trigger: ['blur', 'change'] }],
				beginDate: [{ required: true, message: '请选择预定开始日期!', trigger: ['blur', 'change'] }],
				endDate: [{ required: true, message: '请选择预定结束日期!', trigger: ['blur', 'change'] }],
				beginTime: [{ required: true, message: '请选择预定开始时间!', trigger: ['blur', 'change'] }],
				endTime: [{ required: true, message: '请选择预定结束时间!', trigger: ['blur', 'change'] }],
        meetingTheme: [{ required: true, message: '请输入会议主题!', trigger: ['blur', 'change'] }],
      }
    }
  },
  onLoad({ info, type, date }) {
    this.info = JSON.parse(info) || ''
		// 判断是edit 还是 add
		this.type = type
		this.date = date
		if (type == 'add') {
			this.add()
		} else {
			this.edit()
		}
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    // 初始化新增需要的数据
    add() {
      this.model.applyUser = this.userInfo.empId //当前登录人
      this.model.applyUserDept = this.userInfo.deptId //当前登录人部门
      this.model.applyDate = moment().format('YYYY-MM-DD HH:mm:ss')
			this.model.roomId = this.info.id
			this.model.roomName = this.info.roomName
			this.model.administrator = this.info.administrator
			this.model.beginDate = this.date
			this.model.endDate = this.date
    },
    async edit() {
			this.model = Object.assign({}, this.info)
			this.model.usePurpose = this.model.usePurpose + ''
			this.model.beginTime = this.model.beginTime.slice(0, -3)
			this.model.endTime = this.model.endTime.slice(0, -3)
		},
    validateForm() {
      return this.$refs.form.validate().then(async () => {
        return Promise.resolve()
      })
    },
    async onSubmit() {
			var that = this
      await this.validateForm()
			this.isSubmit = true
			var model = {...this.model}
			model.attendanceNum = Number(model.attendanceNum)
			model.beginTime = (model.beginTime.length >= '8') ? model.beginTime : model.beginTime + ':00'
			model.endTime = (model.endTime.length >= '8') ? model.endTime : model.endTime + ':00'
      try {
        this.loading = true
				var url = ''
				if (this.type == 'edit') {
					url = edit
				} else {
					url = add
				}
        const response = await url({
          ...model
        })
        if (response.success) {
					this.$refs.uToast.show({
						message: response.message,
						type: 'default',
						complete () {
							uni.navigateBack()
						}
					})
        } else {
					this.$refs.uToast.show({
						message: response.message,
						type: 'default'
					})
					that.isSubmit = false
					this.loading = false
				}
      } finally {
				that.isSubmit = false
        this.loading = false
      }
    },
		// 关闭
    onDraft() {
			uni.navigateBack()
		}
  },
}
</script>

<style scoped lang="scss">
@import url('@/assets/inputStyle.scss');
.trip-form-data {
  ::v-deep {
    .u-form-item__body {
      padding-top: 2px;
      padding-bottom: 2px;
    }
  }
}
.checkbox-item {
  display: flex;
  align-items: center;
}
</style>
